<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
  </head>
  <style>
    #div1 {
      background-image: url("./img/girl.jpg");
      background-repeat: no-repeat;
      height: 345px;
      width: 235px;
      animation: run 1s steps(1, end) infinite;
      /* animation: run 1s steps(1, end) infinite reverse; */
      /* animation: run 1s steps(1, end) infinite alternate; */
      /* animation: run 1s steps(1, end) infinite alternate-reverse; */
    }
    @keyframes run {
      0% {
        background-position: 0px 0;
      }
      14.285% {
        background-position: -180px 0;
      }
      28.571% {
        background-position: -369px 0;
      }
      42.857% {
        background-position: -609px 0;
      }
      57.143% {
        background-position: -35px -424px;
      }
      71.429% {
        background-position: -235px -424px;
      }
      85.714% {
        background-position: -435px -424px;
      }
      100% {
      }
    }

    .bb {
      width: 200px;
      height: 200px;
      /* margin: auto; */
      position: relative;
      background: rgba(0, 0, 0, 0.1);
      color: #69ca62;
      box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
    }
    
    .bb::before,
    .bb::after {
        position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      content: "";
      z-index: -1;
      margin: -5%;
      box-shadow: inset 0 0 0 2px;
      animation: clipMe 8s linear infinite;
    }
    .bb::before {
      animation-delay: -4s;
    }
    .bb:hover::after,
    .bb:hover::before {
      background-color: rgba(255, 0, 0, 0.3);
    }

    @keyframes clipMe {
      0%,
      100% {
        clip: rect(0px, 220px, 2px, 0px);
      }
      25% {
        clip: rect(0px, 2px, 220px, 0px);
      }
      50% {
        clip: rect(218px, 220px, 220px, 0px);
      }
      75% {
        clip: rect(0px, 220px, 220px, 218px);
      }
    }
  </style>
  <body>
    <h1>run girl</h1>
    <div id="div1"></div>

    <div
      class="bb"
      style="
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: 100px;
        margin-top: 100px;
      "
    ></div>
  </body>
</html>
